<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Search</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                            <div class="ibox-title" style="border: none;">
                              <h5 style="color: #00afef"><i>Asset</i></h5>
                            </div>
                           <div class="">
                             <form id="search_asset" class="form-horizontal" method="post">
                                <div class="row">
                                  <div class="col-md-6">
                                  <div class="form-group">
                                      <label style="text-align: right;" class="col-lg-4 control-label">Asset Code</label>
                                      <div class="col-lg-8">
                                          <input name="assetCode" type="text" class="form-control">
                                      </div>
                                  </div>
                                  <div class="form-group">
                                      <label style="text-align: right;" class="col-lg-4 control-label">Main Category</label>
                                      <div class="col-lg-8">
                                          <select name="mainCat" class="form-control">
                                              <option value="">--</option>
                                              <?php foreach($main_category as $mc): ?>
                                              <option value="<?php echo $mc->category_code; ?>"><?php echo $mc->description; ?></option>
                                              <?php endforeach; ?>
                                          </select>
                                      </div>
                                  </div>
                                  <div class="form-group">
                                      <label style="text-align: right;" class="col-lg-4 control-label">Sub Category</label>
                                      <div class="col-lg-8">
                                          <select name="subCat" class="form-control">
                                          </select>
                                      </div>
                                  </div>
                                  <div class="form-group">
                                      <label style="text-align: right;" class="col-lg-4 control-label">Asset Name</label>
                                      <div class="col-lg-8">
                                          <input name="assetName" type="text" class="form-control">
                                      </div>
                                  </div>
                                  <div class="form-group">
                                      <label style="text-align: right;" class="col-lg-4 control-label">Department</label>
                                      <div class="col-lg-8">
                                          <select name="department" class="form-control">
                                              <option value="">--</option>
                                              <?php foreach($dep as $s): ?>
                                              <option value="<?php echo $s->lookup_code; ?>"><?php echo $s->meaning; ?></option>
                                              <?php endforeach; ?>
                                          </select>
                                      </div>
                                  </div>
                                </div>
                                <div class="col-md-6">
                                  <div class="form-group">
                                      <label style="text-align: right;" class="col-lg-4 control-label">Location</label>
                                      <div class="col-lg-8">
                                          <select name="location" class="form-control">
                                            <option value="">--</option>
                                            <?php foreach($location as $mc): ?>
                                            <option value="<?php echo $mc->location_code; ?>"><?php echo $mc->description; ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                      </div>
                                  </div>
                                  <div class="form-group">
                                      <label style="text-align: right;" class="col-lg-4 control-label">Asset Description</label>
                                      <div class="col-lg-8">
                                          <input name="assetDesc" type="text" class="form-control">
                                      </div>
                                  </div>
                                  <div class="form-group">
                                      <label style="text-align: right;" class="col-lg-4 control-label">Asset Status</label>
                                      <div class="col-lg-8">
                                          <select name="assetStatus" class="form-control">
                                              <option value="">--</option>
                                              <?php foreach($asset_status as $mc): ?>
                                              <option value="<?php echo $mc->lookup_code; ?>"><?php echo $mc->meaning; ?></option>
                                              <?php endforeach; ?>
                                          </select>
                                      </div>
                                  </div>
                                  <div class="form-group">
                                      <label style="text-align: right;" class="col-lg-4 control-label">Asset Owner</label>
                                      <div class="col-lg-8">
                                           <select name="assetOwner" class="form-control">
                                              <option value="">--</option>
                                              <?php foreach($employee as $mc): ?>
                                              <option value="<?php echo $mc->employee_id; ?>"><?php echo $mc->first_name.' '.$mc->last_name; ?></option>
                                              <?php endforeach; ?>
                                            </select>
                                      </div>
                                  </div>
                                  <div class="form-group">
                                    <label style="text-align: right;" class="col-lg-4 control-label">Depreciation Cycle</label>
                                    <div class="col-lg-8">
                                        <select name="depCycle" class="form-control">
                                            <option value="">--</option>
                                            <?php foreach($depre_cycle as $mc): ?>
                                            <option value="<?php echo $mc->lookup_code; ?>"><?php echo $mc->meaning; ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                </div>
                                </div>
                                </div>
                                <div class="form-group">
                                     <div class="col-md-4 col-md-offset-8">
                                        <a href="javascript:document.getElementById('search_asset').reset();" class="pull-right btn btn-warning btn-md m-t-n-xs clear-btn" id="search-form"> Clear</a>
                                        <button class="btn btn-primary btn-md m-t-n-xs search-btn pull-right btn-margin-right" id="search-assets"> Search</button>
                                    </div>
                                </div>
                             </form>
                           </div>
                           <button class="btn btn-success btn-md m-t-n-xs add-tab-btn" id="add-assets-tab"> Add</button>
                           <div class="ibox-content">
                              <div class="table-responsive">
                              <table class="table table-bordered table-compact" style="width: 100%">
                                  <thead>
                                      <tr>
                                          <th>Asset Code</th>
                                          <th>Main Category</th>
                                          <th>Sub Category</th>
                                          <th>Asset Name</th>
                                          <th>Department</th>
                                          <th>Location</th>
                                          <th>Asset Description</th>
                                          <th>Asset Owner</th>
                                          <th>Asset Status</th>
                                          <th style="padding:8px;text-align:center;width:75px;">Action</th>
                                      </tr>
                                  </thead>
                                  <tbody id="search-asset-result">
                                  </tbody>
                              </table>
                              </div>
                          </div>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
    </div><!-- END of class row -->
</div>
<input type="hidden" id="count_add" value="0">
<input type="hidden" id="count_edit" value="0">
<input type="hidden" id="count_view" value="0">
<script>
      $(document).ready(function(){
        $('select').chosen({width: '100%'});
        $('#tab-list-2').on('click','#viewX',function(){
            var tabId = $(this).parents('li').children('a').attr('href');
            $(this).parents('li').remove('li');
            $(tabId).remove();
            $('#tab-list-2 a:first').tab('show');
            if(tabId == "#view"){
                $('#count_view').val('0');
            }else if(tabId == "#edit"){
                $('#count_edit').val('0');
            }else{
                $('#count_add').val('0');
            }
        });
        
        $(document).on('change','#search_asset select[name=mainCat]',function(){
          $.ajax({
            url: "<?php echo base_url($this->session->userdata('forajax') . '/getSubCat'); ?>",
            method: "POST",
            data: { 'cat_code' : $(this).val() },
            dataType: 'json',
            success: function(data){
              var tmp = '';
              $.each(data,function(i, item) {
                tmp += '<option value="'+data[i].sub_category_code +'">'+ data[i].description +'</option>';
              });
              $('#search_asset select[name=subCat]').html(tmp);
              $("select").trigger("chosen:updated");
            }
          });
        });

        $('#add-assets-tab').click(function(){
             if($('#count_add').val() == 0){
                $('#tab-list-2').append('<li id="add-link"><a href="#add" role="tab" data-toggle="tab">Add<button id="addX" style="margin-left:10px;" class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="add"><div class="panel-body"><div id="add_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#add-link').show();
                $('#count_add').val('1');
                $("#add_data").load("<?php echo $this->session->userdata('forload') . '/add_form/'; ?>",function(response, status, xhr) {
                  if (status == "error") {
                        var msg = "Sorry but there was an error: ";
                        notifymsg('danger',msg + xhr.status + " " + xhr.statusText);
                      }
                  });
            }
            $('#tab-list-2 a[href="#add"]').tab('show');
        });

        $(document).on('click', '.btn.btn-primary.btn-outline.btn-sm.edit-tab', function(){
            var catCode = $(this).closest('tr').children('#asset_id_v').text();
            if($('#count_edit').val() == 0){
                $('#tab-list-2').append('<li id="edit-link"><a href="#edit" role="tab" data-toggle="tab">Edit<button id="editX" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="edit"><div class="panel-body"><div id="edit_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#edit-link').show();
                $('#count_edit').val('1');
            }
            $('#tab-list-2 a[href="#edit"]').tab('show');
            $("#edit_data").load("<?php echo $this->session->userdata('forload') . '/edit_form/'; ?>/"+ catCode,function(response, status, xhr) {
              if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    notifymsg('danger',msg + xhr.status + " " + xhr.statusText);
                  }
              });
        });

        $(document).on('click', '.btn.btn-primary.btn-outline.btn-sm.view-tab', function(){
            var catCode = $(this).closest('tr').children('#asset_id_v').text();
            if($('#count_view').val() == 0){
                $('#tab-list-2').append('<li id="view-link"><a href="#view" role="tab" data-toggle="tab">View<button id="viewX" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="view"><div class="panel-body"><div id="view_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#view-link').show();
                $('#count_view').val('1');
            }
            $("#view_data").load("<?php echo $this->session->userdata('forload') . '/view_form/'; ?>"+catCode,function(response, status, xhr) {
              if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    notifymsg('danger',msg + xhr.status + " " + xhr.statusText);
                  }
              });
            $('#tab-list-2 a[href="#view"]').tab('show');
        });

        $('#search-assets').click(function(e){
            $('#search-asset-result').html('');
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/search'); ?>",
                data: $('#search_asset').serialize(),
                dataType: 'json',
                success: function(e){
                    if(e == 'No results found.'){
                        notifymsg('success','<b>Success</b>: 0 Result Found.');
                        $('#search-asset-result').append("<td colspan='6' align='center'><h3>No Result Found</h3></td>");
                    }else{
                        var trHTML = '';
                        var cb_state = "hover";
                        var count = 0;
                        $.each(e, function(i, item) {
                            if(e[i].enable_flag == "Y"){
                            cb_state = "checked";
                            }
                            trHTML += '<tr style="line-height:1;padding:2px;"><td id="asset_id_v" style="display:none;">'+ e[i].asset_id +'</td><td id="">'+ e[i].asset_code +'</td><td>'+ e[i].main_cat_meaning +'</td><td>'+ e[i].sub_cat_meaning +'</td><td>'+ e[i].asset_name +'</td><td>'+ e[i].dep_meaning +'</td><td>'+ e[i].loc_meaning +'</td><td>'+ e[i].asset_description +'</td><td>'+ e[i].owner_meaning +'</td><td>'+ e[i].status_meaning +'</td><td align="center"><button type="button" class="btn btn-sm btn-primary btn-xs btn-outline edit-tab" data-toggle="tab" href="#add" title="Edit"><i class="fa fa-pencil-square-o fa-lg"></i></button><button type="button" class="btn btn-outline btn-sm btn-primary btn-xs view-tab" data-toggle="tab" role="tab" href="#view-3" title="View"><i class="fa fa-file-text-o fa-lg"></i></button></td></tr>';
                            count++;
                        });
                        notifymsg('success','<b>Success</b>:'+ count +' Result Found.');
                        $('#search-asset-result').append(trHTML);
                    }
                },
                complete: function(data) {
                    $('#search-assets').removeAttr('disabled');
                },
                beforeSend: function(){
                    $('#search-assets').attr('disabled',true);
                }
            });
        });
      });
</script>